<template>
	<view style="padding: 0 50rpx;">
		<view v-for="item in 10" :key="item" style="height: 100rpx;background-color: pink;">
			其它内容
		</view>
		<video src="https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/2minute-demo.mp4" style="width: 100%;"></video>
		<view v-for="item in 5" :key="item" style="height: 100rpx;background-color: pink;">
			其它内容
		</view>
	</view>
	<view class="seat"> </view>
	<!--<view class="button-box">
		<button class="btn-self">操作</button>
	</view> -->
</template>

<script>
	export default {
		data() {
			return {
				optionView: null
			}
		},
		onLoad() {
			// 这里我的高度统一是120rpx，但是plus不能用rpx，所以需要算一下
			let rpxUnit = 1
			uni.getSystemInfo({
				success: (info) => {
					rpxUnit = info.screenWidth / 750
				}
			});
			this.optionView = new plus.nativeObj.View("option-view", {
				position: "dock",
				dock: "bottom",
				width: "100%",
				height: `${rpxUnit*120}px`,
				bottom: 0,
				backgroundColor: "#fff",
			}, [{
				id: "rect-id",
				tag: "rect",
				color: "#f98d2b",
				position: {
					top: `${rpxUnit*20}px`,
					bottom: `${rpxUnit*20}px`,
					left: `${rpxUnit*225}px`,
					right: `${rpxUnit*225}px`,
				},
				rectStyles: {
					radius: `${rpxUnit*40}px`
				}
			}, {
				id: 'font-id',
				tag: 'font',
				text: '操作',
				position: {
					top: `${rpxUnit*20}px`,
					bottom: `${rpxUnit*20}px`,
					left: `${rpxUnit*225}px`,
					right: `${rpxUnit*225}px`,
				},
				textStyles: {
					align: "center",
					color: "#fff",
					size: '18px'
				}
			}]);
			this.optionView.show()
		},
		onUnload(){
			this.optionView.close()
		},
		methods: {

		}
	}
</script>

<style lang="less" scoped>
	.seat {
		height: 120rpx;
	}

	.button-box {
		display: flex;
		justify-content: space-around;
		position: fixed;
		bottom: 0;
		width: 100%;
		color: #666;
		font-size: 28rpx;
		background-color: #fff;
		background-color: yellow;
		padding: 20rpx 40rpx;
		box-shadow: 1px 2px 30px rgba(0, 0, 0, 0.2);
		box-sizing: border-box;
		z-index: 10;

		.btn-self {
			width: 40%;
			height: 80rpx;
			color: #fff;
			font-size: 28rpx;
			line-height: 80rpx;
			background-color: #f98d2b;
			border-radius: 50px;
			margin: 0;
		}
	}
</style>